<template>
  <div ref="robotRefBox" style="width: 100%; height: 100%; overflow: hidden">
    <div
      ref="robotRef"
      style="width: 100%; height: 100%; overflow: hidden"
    ></div>
  </div>
</template>

<script setup>
import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { onMounted, ref, onUnmounted } from "vue";

const props = defineProps({
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
});

const { url } = toRefs(props);

const robotRefBox = ref(null);

// 创建场景
const robotRef = ref(null);

// 加载器
const loader = new GLTFLoader();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(100, 156 / 148, 0.1, 1000);

const render = new THREE.WebGLRenderer({ antialias: true });
render.setSize(156, 148);
render.setClearColor(0xe5e5e5);
render.shadowMap.enabled = true;
render.shadowMap.type = THREE.PCFSoftShadowMap;

// 创建轨道控制器
const controls = new OrbitControls(camera, render.domElement);
camera.position.z = 5;
controls.update();

const ambientLight = new THREE.AmbientLight(0xeeeeee); // 柔和的白光
scene.add(ambientLight);

// const pointLight = new THREE.PointLight( 0xffffff, 1);
// pointLight.position.set( 0,0, 0 );
// scene.add( pointLight );

const directionalLight = new THREE.DirectionalLight(0xffffff, 4.6);
directionalLight.position.set(2, 2, 2);
directionalLight.castShadow = true;
directionalLight.shadow.camera.far = 30;
directionalLight.shadow.mapSize.set(1024, 1024);
directionalLight.target.updateWorldMatrix();
scene.add(directionalLight);

// 创建平面
const geometry = new THREE.PlaneGeometry(50, 50);
const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  side: THREE.BackSide,
});
material.roughness = 0.7;
const plane = new THREE.Mesh(geometry, material);
plane.rotation.x = Math.PI / 2;
plane.position.y = -2.5;
plane.receiveShadow = true;
scene.add(plane);

const updateAllMaterials = () => {
  scene.traverse((child) => {
    if (
      child instanceof THREE.Mesh &&
      child.material instanceof THREE.MeshStandardMaterial
    ) {
      child.castShadow = true;
      child.receiveShadow = true;
    }
  });
  console.log(scene.children);
};

const animate = () => {
  requestAnimationFrame(animate);
  controls.update();
  render.render(scene, camera);
};
animate();

// 初始化实际宽高
function initMatrix() {
  camera.aspect =
    robotRefBox.value.offsetWidth / robotRefBox.value.offsetHeight;
  camera.updateProjectionMatrix();
  render.setSize(robotRefBox.value.offsetWidth, robotRefBox.value.offsetHeight);
}

onMounted(() => {
  initMatrix();

  robotRef.value.appendChild(render.domElement);
  loader.load(url.value, (glb) => {
    console.log(glb);
    glb.scene.scale.set(5, 5, 5);
    scene.add(glb.scene);
    // const childrens = [...glb.scene.children];
    // for (const children of childrens) {
    //   scene.add(children);
    // }
    updateAllMaterials();
  });

  window.addEventListener("resize", () => {
    initMatrix();
  });
});

onUnmounted(() => {
  window.removeEventListener("resize", () => {});
});
</script>

<style scoped>
.gui-container {
  position: fixed;
  bottom: 0; /* 距离顶部的距离 */
  right: 0; /* 距离右侧的距离 */
}
</style>
